<template>
  <div>
    <div class="first">
      <div @click="setdialogVisible">增加</div>
      <div @click="handleeditdialogVisible">修改</div>
      <div @click="handleDel">删除</div>
      <div>查询</div>
      <div @click="handlerow">查看</div>
      <div @click="handlerefresh">刷新</div>
      <div @click="handlestop">停用</div>
      <div @click="handlesuoding">锁定</div>
    </div>
    <div>
      <template>
        <el-table
          :data="tableData"
          style="width: 100%"
          height="250"
          :row-class-name="tableRowClassName"
          @row-click="handleRowClick"
        >
          <el-table-column fixed prop="date" label="日期" width="150">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="province" label="省份" width="120">
          </el-table-column>
          <el-table-column prop="city" label="市区" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="300">
          </el-table-column>
          <el-table-column prop="zip" label="邮编" width="120">
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2, 3, 4, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
    <!-- 添加 -->
    <div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="活动名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="添加时间" prop="date">
              <el-date-picker
                v-model="value1"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="省份" prop="province">
              <el-input v-model="ruleForm.province"></el-input>
            </el-form-item>
            <el-form-item label="城市" prop="city">
              <el-input v-model="ruleForm.city"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input v-model="ruleForm.address"></el-input>
            </el-form-item>
            <el-form-item label="邮编" prop="zip">
              <el-input v-model="ruleForm.zip"></el-input>
            </el-form-item>
            <el-form-item label="停用" prop="tingyong">
              <el-input v-model="ruleForm.tingyong"></el-input>
            </el-form-item>
            <el-form-item label="锁定" prop="suoding">
              <el-input v-model="ruleForm.suoding"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleAdd">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 编辑 -->
    <div>
      <el-dialog
        title="提示"
        :visible.sync="editdialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div>
          <el-form
            :model="editruleForm"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="活动名称" prop="name">
              <el-input v-model="editruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="添加时间" prop="date">
              <el-date-picker
                v-model="value1"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="省份" prop="province">
              <el-input v-model="editruleForm.province"></el-input>
            </el-form-item>
            <el-form-item label="城市" prop="city">
              <el-input v-model="editruleForm.city"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input v-model="editruleForm.address"></el-input>
            </el-form-item>
            <el-form-item label="邮编" prop="zip">
              <el-input v-model="editruleForm.zip"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleEdit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 查看 -->
    <div>
      <el-dialog
        title="提示"
        :visible.sync="kandialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div>
          <div>{{ selectrow.name }}</div>
          <div>{{ selectrow.date }}</div>
          <div>{{ selectrow.province }}</div>
          <div>{{ selectrow.city }}</div>
          <div>{{ selectrow.address }}</div>
          <div>{{ selectrow.zip }}</div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="kandialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="kandialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      editdialogVisible: false,
      kandialogVisible: false,
      istingyong: false,
      selectrow: {},
      currentPage: 1,
      pageSize: 2,
      total: 0,
      value1: "",
      ruleForm: {
        name: "",
        date: "",
        province: "",
        city: "",
        address: "",
        zip: "",
        tingyong: false,
        suoding: false,
      },
      editruleForm: {
        name: "",
        date: "",
        province: "",
        city: "",
        address: "",
        zip: "",
        istingyong: false,
        issuoding: false,
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        province: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.halelist();
  },
  methods: {
    halelist() {
      axios.get("http://localhost:3001/tableList",{params:{page:this.currentPage,size:this.pageSize}}).then((res) => {
        this.tableData = res.data;
        this.total=res.data.length
// 根据当前页和每页大小截取对应数据
const start = (this.currentPage - 1) * this.pageSize;
    const end = start + this.pageSize;
    this.tableData = this.tableData.slice(start, end);
      });
    },
    setdialogVisible() {
      this.dialogVisible = true;
    },
    handleeditdialogVisible() {
      this.editdialogVisible = true;
    },
    handleAdd() {
      axios
        .post("http://localhost:3001/tableList", this.ruleForm)
        .then((res) => {
          this.dialogVisible = false;
          this.halelist();
        });
    },
    handleRowClick(row) {
      this.selectrow = row;
      this.editruleForm = this.selectrow;
    },
    handleEdit() {
      axios
        .put(
          `http://localhost:3001/tableList/${this.editruleForm.id}`,
          this.editruleForm
        )
        .then((res) => {
          this.editdialogVisible = false;
          this.halelist();
        });
    },
    handleDel() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios
            .delete(`http://localhost:3001/tableList/${this.selectrow.id}`)
            .then((res) => {
              this.halelist();
            });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handlerow() {
      this.kandialogVisible = true;
    },
    handlerefresh() {
      this.halelist(); // 不
    },
    handlestop() {
      if (this.selectrow) {
        this.selectrow.istingyong = !this.selectrow.istingyong;
        // this.$set(this.tableData, this.tableData.indexOf(this.selectrow), this.selectrow);
      }
    },
    handlesuoding() {
      if (this.selectrow) {
        this.selectrow.issuoding = !this.selectrow.issuoding;
      }
    },
    tableRowClassName({ rowIndex }) {
      const row = this.tableData[rowIndex];
      return row.istingyong || row.issuoding ? "disabled-row" : "";
    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize=val
        this.halelist()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage=val
        this.halelist()
      }
  },
};
</script>

<style>
.first {
  display: flex;
  justify-content: space-around;
  margin-bottom: 50px;
}
.disabled-row {
  background-color: #f0f0f0 !important;
  pointer-events: none;
}
</style>